<template>
	<view>
		<view class="box-pic">
			<image src="/static/fuwu/fx.png" mode=""></image>
		</view>
		<view class="box-bj">
			<view class="fx-bj">成都美发福利综合榜</view>
			<view class="fx-top">TOP50</view>
			<view class="fx_text">
				本地最受欢迎的美发店 | 每天更新
			</view>
			<view class="fx_tab">
				<view class="swiper-tabs">
					<view :class="['swiper-tab-lists', Tabs==0 ? 'ons' : '']" @click="Tabs=0">人气榜</view>
					<view :class="['swiper-tab-lists', Tabs==1 ? 'ons' : '']" @click="Tabs=1">热销榜</view>
					<view :class="['swiper-tab-lists', Tabs==2 ? 'ons' : '']" @click="Tabs=2">口碑榜</view>
				</view>
			</view>
		</view>
		<view v-show="Tabs == 0">
			<view class="stylist-con" v-for="(con,dex) in 3" :key="index">
				<view class="sty">
					<view class="stylist-top">
						<view class="dy">
							<image src="/static/fuwu/dy.png" mode=""></image>
						</view>
						<view class="stylist-img">
							<image src="/static/nan.jpg" mode=""></image>			
						</view>
						<view class="stylist-cen">
							<view class="cen-name">洗剪吹 </view>						
							<view class="label">
								设计提案+洗护+造型
							</view>
							<view class="cen-score">
								<text >TIONHG </text>
								<text>成都NIC造型美发</text>
								<text >2.6km</text>
							</view>
							<view class="introduce">
								<text>近七天累计人气235</text>
							</view>
							<view class="price">
								<text class="text-w">￥658</text>
								<text class="text-t">1677</text>
								<view class="label-text">
									<view>秒杀</view>
									<view>券</view>
									<view>满减</view>
								</view>
							</view>
						</view>						
					</view>

				</view>	
				<view class="border">
					<image src="/static/nan.jpg" mode=""></image>
					<view>购买后使用 非常的方便，设计师很专业呢</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Tabs: 0,
				list:[
					{
						name:'洗剪吹',
						detail:'设计提案+洗护+造型',
						design_name:'TIONHG 丨 成都NIC造型美发',
						distance:'2.6km',
						host:'近七天累计人气236',
						now_price:658,
						old_price:1699,
						
					},
				]
			}
		},
		methods: {
			chang(Tabs) {
				that.navIdx = Tabs;
			},
		}
	}
</script>

<style lang="scss">
	.box-pic {
		width: 100%;
		height: 315rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box-bj {
		width: 100%;
		height: 315rpx;
		background: rgba($color: #000, $alpha: 0.3);
		position: absolute;
		top: 0;

		.fx-bj {
			position: absolute;
			z-index: 2;
			top: 15%;
			left: 25%;
			width: 388rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 30rpx;
			color: #000000;
			font-weight: 500;
			font-family: PingFang;
			background-image: url('@/static/fuwu/bj.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			-moz-background-size: 100% 100%;
		}

		.fx-top {
			position: absolute;
			top: 45%;
			left: 39%;
			width: 200rpx;
			height: 38rpx;
			line-height: 38rpx;
			border: 1rpx solid #eee;
			font-size: 36rpx;
			color: #fff;
			font-weight: 500;
			font-family: Regular;
			text-align: center;
		}

		.fx_text {
			position: absolute;
			top: 61%;
			left: 26%;
			font-size: 26rpx;
			color: #fff;
			font-family: PingFang;
		}

		.fx_tab {
			position: absolute;
			bottom: 5%;
			left: 16%;
			color: #000000;

			.swiper-tabs {
				// width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.swiper-tab-lists {
					font-size: 20rpx;
					display: block;
					font-family: PingFang SC;
					font-weight: 400;
					padding: 10rpx 30rpx;
					border-radius: 5rpx;
					color: #000;
					background: #EEEEEE;
					margin-right: 85rpx;
				}

				.ons {
					color: #fff;
					background-color: #00c6c2;

				}
			}
		}
	}

	.stylist-con {
		padding: 10rpx 30rpx 25rpx 30rpx;
		border-bottom: 10rpx solid #EEEEEE;

		.sty {
			padding: 20rpx 0;

			.stylist-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.dy {					
					width: 43rpx;
					height: 43rpx;
					padding-right: 10rpx;
									
					image {
						width: 100%;
						height: 100%;
					}
				}
				.stylist-img {
					width: 30%;
					
					image {
						width: 177rpx;
						height: 200rpx;					
					}
					
					.ico {
						padding-left: 5rpx;

						.iconfont {
							color: #F2CB51;
							font-size: 16rpx;
							padding-right: 8rpx;
						}
					}
				}

				.stylist-cen {
					width: 70%;

					.cen-name {
						font-size: 24rpx;
						color: #000000;
						font-family: PingFang SC;
						font-weight: 500;

					}
					.label {
						padding-top: 5rpx;						
						color: #333;
						font-size: 24rpx;									
					}
					.cen-score {
						padding: 8rpx 0;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						

						text {
							font-size: 20rpx;
							color: #777;
						}
						
					}

					.introduce {					
						padding: 0;
						
						text{
							display: inline-block;
							padding: 5rpx 5rpx;
							font-size: 20rpx;
							background-color:#584f60;						
							color: #fff;
						}
						
					}
					.price{
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						
						.text-w{
							font-size: 30rpx;
							color:#ff3d3d;
						}
						.text-t{
							text-decoration:line-through;
							font-size:20rpx;
							color:  #b5b5b5;
							margin-left: 20rpx;
						}
						.label-text{
							margin: 0 30rpx;
							width: 160rpx;
							display: flex;
							align-items: center;
							justify-content:space-between;																																		
							view{
								color:  #fff;
								font-size:16rpx;
								padding: 5rpx 10rpx;
								border-radius: 5rpx;
								background-color: #00c6c2;
							}
						}
					}
				}


			}

		
		}
		
		.border{
			padding: 15rpx 30rpx;
			border: 1rpx solid #dddddd;
			display: flex;
			align-items: center;
			border-radius: 8rpx;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
			view{
				font-size: 16rpx;
				color:  #b5b5b5;
				margin-left: 30rpx;
			}
		}
}
</style>
